<template>
    <div class="km-dropdown">
        <slot name="content"></slot>
        <div class="km-dropdown-content">
            {#html data.value}
        </div>
    </div>
</template>
<script>
    export default function() {

        let event = new Event(this);

        let data = this.ref("");

        this.attred = (name, oldValue, newValue) => {
            if (name === 'options' && newValue !== oldValue) {
                try {
                    let options = JSON.parse(newValue);
                    data.value = this.getHtml(options);
                } catch (error) {
                    console.error(error);
                }
            }
        }

        this.getHtml = (data) => {
            let html = "";
            data.forEach((item) => {
                html += `<div class="km-dropdown-item">`
                html += `<div class="km-dropdown-trigger" ${this.kmEvent('click', 'handleSelect')} key="${item.value}">`
                html += `<span>${item.label}</span>`
                html += `</div>`
                if (item.child) {
                    html += `<div class="km-dropdown-submenu">`
                    html += this.getHtml(item.child);
                    html += `</div>`
                }
                html += `</div>`;
            })
            return html;
        }

        this.handleSelect = (e, item) => {
            const value = item.getAttribute('key');
            event.emit('select', value);
            e.stopPropagation();
        }

        this.cleaned = ()=>{
            event.destroy();
        }
    }
</script>
<style>
    .km-dropdown {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    .km-dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        max-width: 180px;
        padding: 4px 0;
        background-color: var(--white);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow-005);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: var(--transition), var(--transition), var(--transition);
    }

    .km-dropdown:hover>.km-dropdown-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(5px);
    }

    .km-dropdown-item {
        display: flex;
        align-items: center;
        padding: 0 4px;
        color: var(--black);
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }

    .km-dropdown-trigger {
        padding: 8px 16px;
        border-radius: var(--border-radius);
    }

    .km-dropdown-item:hover>.km-dropdown-trigger {
        background-color: var(--gray-shallow);
    }

    /* 多级菜单 */
    .km-dropdown-submenu {
        position: absolute;
        left: 100%;
        max-width: 180px;
        padding: 4px 0;
        background-color: var(--white);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow-005);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateX(8px);
        transition: var(--transition), var(--transition), var(--transition);
    }

    .km-dropdown-item:hover>.km-dropdown-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(5px);
    }
</style>